<!-- components/FloatingMenu.vue -->
<template>
  <div class="floating-menu" @mouseleave="handleMouseLeaveCheck(1)">
    <aside class="flex flex-row">
      <div class="flex flex-col relative">
        <div
          :class="[
            'flex flex-row phone-dialog items-center',
            showDialogIndex == 0 ? 'active' : '',
          ]"
          @mouseenter="handleMouseMoveCheck(0)"
        >
          <div
            class="w-[40px] h-[40px] flex flex-col justify-center items-center ic-phone-dialog ml-[14px]"
          >
            <nuxt-img
              src="/svg/menu01.svg"
              alt="icon"
              class="w-[20px] h-[20px]"
            />
          </div>
          <div class="flex flex-col justify-center h-[100%] ml-[14px]">
            <span class="text-[14px] font-medium fontGradient"
              >13761988272</span
            >
            <span class="text-[12px] mt-[6px]">工作日9:30-18:00在线</span>
          </div>
        </div>
        <div
          :class="[
            'flex flex-col items-center wecaht-dialog',
            showDialogIndex == 1 ? 'active' : '',
          ]"
          @mouseenter="handleMouseMoveCheck(1)"
        >
          <span class="text-[14px] font-semibold fontGradient mt-[18px]"
            >幻引智服公众号</span
          >
          <span class="text-[12px] mt-[7px]">打开微信扫码联系客服</span>

          <nuxt-img
            src="/qrcode.png"
            alt="customerServiceQrCode"
            class="mt-[17px] w-[120px] h-[120px]"
          />
        </div>
        <div
          :class="[
            'flex flex-col call-bg   call-dialog',
            showDialogIndex == 2 ? 'active' : '',
          ]"
          @mouseenter="handleMouseMoveCheck(2)"
        >
          <template v-if="isSubmitSuccessful">
            <svg
              class="ml-auto mr-auto mt-[40px] w-[86px] h-[86px]"
              width="86"
              height="86"
              viewBox="0 0 86 86"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_d_430_678)">
                <rect
                  x="10"
                  y="8"
                  width="66"
                  height="66"
                  rx="33"
                  fill="url(#paint0_linear_430_678)"
                />
              </g>
              <path
                d="M60.2667 32.4175L40.1997 53.2182C39.7203 53.7147 39.0626 53.9961 38.3758 54H38.3621C37.6807 54 37.0268 53.7255 36.5443 53.2383L25.7537 42.3303C24.7488 41.3157 24.7488 39.6694 25.7537 38.6533C26.7578 37.6372 28.3852 37.6372 29.3893 38.6533L38.3414 47.7031L56.5906 28.7815C57.5848 27.7561 59.2144 27.7368 60.2262 28.7413C61.2418 29.7458 61.2601 31.3921 60.2667 32.4183V32.4175Z"
                fill="white"
              />
              <defs>
                <filter
                  id="filter0_d_430_678"
                  x="0"
                  y="0"
                  width="86"
                  height="86"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="2" />
                  <feGaussianBlur stdDeviation="5" />
                  <feComposite in2="hardAlpha" operator="out" />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 0.645037 0 0 0 0 0.265594 0 0 0 0 1 0 0 0 0.15 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="BackgroundImageFix"
                    result="effect1_dropShadow_430_678"
                  />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="effect1_dropShadow_430_678"
                    result="shape"
                  />
                </filter>
                <linearGradient
                  id="paint0_linear_430_678"
                  x1="12.4444"
                  y1="12.95"
                  x2="76"
                  y2="12.95"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-color="#B677FF" />
                  <stop offset="1" stop-color="#1955F7" />
                </linearGradient>
              </defs>
            </svg>
            <span
              class="text-[20px] font-bold fontGradient mt-[17px] ml-auto mr-auto"
              >预约成功</span
            >
            <span class="text-[14px] text-[#7D7D7D] mt-[5px] ml-auto mr-auto"
              >客服人员将在24小时内向你致电</span
            >
            <button
              :style="{ '--x': mouseX + 'px', '--y': mouseY + 'px' }"
              class="buttonBox bookBtnFull"
              :disabled="isSending"
              @mousemove="handleMouseMove"
              @click="handleMouseLeaveCheck(3)"
            >
              <span>知道了</span>
            </button>
          </template>
          <template v-else>
            <span
              class="text-[16px] font-semibold fontGradient mt-[18px] ml-[15px]"
              >预约回电</span
            >
            <span class="text-[12px] text-[#7D7D7D] mt-[5px] ml-[15px]"
              >客服人员将在24小时内向你致电</span
            >
            <input
              v-model="phone"
              required
              type="tel"
              maxlength="11"
              class="input-field"
              placeholder="输入您的联系电话"
              @compositionstart="handleCompositionstart"
              :disabled="isSending"
            />
            <textarea
              v-model="desc"
              required
              @compositionstart="handleCompositionstart"
              class="input-textarea"
              placeholder="想要咨询的内容"
              :disabled="isSending"
            ></textarea>
            <button
              :style="{ '--x': mouseX + 'px', '--y': mouseY + 'px' }"
              class="buttonBox bookBtn"
              :disabled="isSending"
              @mousemove="handleMouseMove"
              @click="handleCommit"
            >
              <span>立即预约</span>
            </button>
          </template>
        </div>
        <div
          :class="[
            'flex flex-col  hide-dialog',
            showDialogIndex == -1 ? 'active' : '',
          ]"
          @mouseenter="handleMouseMoveCheck(-1)"
        ></div>
      </div>
      <div class="flex flex-col">
        <div class="relative clue-avatar mb-[16px]">
          <div class="clue-avatar__border"></div>
          <div class="clue-avatar__img">
            <nuxt-img src="/svg/menu-robot.svg" alt="icon" class="" />
          </div>
          <div class="clue-avatar__text text-[13px]">
            <span>联系我们</span>
          </div>
        </div>
        <div
          class="buttonBox"
          :style="{ '--x': mouseX + 'px', '--y': mouseY + 'px' }"
          @mousemove="handleMouseMove"
          @mouseleave="handleMouseLeaveCheck(5)"
        >
          <div class="aside-item" @mouseenter="handleMouseMoveCheck(0)">
            <nuxt-img
              src="/svg/menu01.svg"
              alt="icon"
              class="w-[20px] h-[20px]"
            />
            <span class="text-[13px] mt-[4px]"> 电话咨询 </span>
          </div>
          <div class="aside-item" @mouseenter="handleMouseMoveCheck(1)">
            <nuxt-img
              src="/svg/menu02.svg"
              alt="icon"
              class="w-[20px] h-[20px]"
            />
            <span class="text-[13px] mt-[4px]"> 微信咨询 </span>
          </div>
          <div class="aside-item" @mouseenter="handleMouseMoveCheck(2)">
            <nuxt-img
              src="/svg/menu03.svg"
              alt="icon"
              class="w-[20px] h-[20px]"
            />
            <span class="text-[13px] mt-[4px]"> 预约回电 </span>
          </div>
        </div>
      </div>
    </aside>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const mouseX = ref(0)
const mouseY = ref(0)
const showDialogIndex = ref(-1)
const phone = ref('')
const desc = ref('')

const isSending = ref(false)
const isComposing = ref(false)
const isSubmitSuccessful = ref(false)
const handleMouseMove = (event) => {
  const rect = event.currentTarget.getBoundingClientRect()
  mouseX.value = event.clientX - rect.left
  mouseY.value = event.clientY - rect.top
}

const handleMouseMoveCheck = (index) => {
  // 要显示哪一个弹窗
  nextTick(() => {
    showDialogIndex.value = index
  })
}

const handleMouseLeaveCheck = (index) => {
  // 隐藏所有弹窗
  if (isComposing.value) {
    return
  }
  nextTick(() => {
    showDialogIndex.value = -1
    isComposing.value = false
  })
  // console.log('隐藏所有弹窗', index)
}

const handleCompositionstart = () => {
  // console.log('handleCompositionstart')
  isComposing.value = true
}

const toast = useToast()

const handleCommit = () => {
  if (!phone.value.trim() || !desc.value.trim()) {
    toast.add({ title: '请正确填写内容后预约~', color: 'error' })
    return
  }
  if (phone.value.trim().length < 11) {
    toast.add({ title: '请正确填写联系电话~', color: 'error' })
    return
  }
  handleMsg()
}

import userApi from '@/api/index'
async function handleMsg() {
  isSending.value = true
  try {
    const response = await userApi.askQuestions(
      `data=新增用户咨询：联系电话：${phone.value.trim()}；咨询内容：${desc.value.trim()}&session_id=1&endpoint_id=${localStorage.getItem('user_id')}&是否有效=1`,
    )
    if (response) {
      isSubmitSuccessful.value = true
      showDialogIndex.value = 2
      isComposing.value = false
      phone.value = ''
      desc.value = ''
    }
    isSending.value = false
  } catch (error) {
    console.error(' failed:', error)
    isSending.value = false
  }
}
</script>

<style scoped>
.floating-menu {
  position: fixed;
  bottom: 200px;
  right: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: 1000;
  width: fit-content;
  height: fit-content;
}

.call-bg {
  background: url(@/assets/images/call-bg.png) no-repeat center center;
  background-size: 100% 100%;
  width: 260px;
  min-height: 283px;
}

@keyframes breathe {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  25% {
    opacity: 0.8;
    transform: scale(1.1);
  }

  50% {
    opacity: 0.1;
    transform: scale(1.3);
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes breathe-img {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(0.8);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.clue-avatar::after {
  background-image: url(@/assets/images/avatar-border.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  width: 72px;
  height: 72px;
  left: -2px;
  position: absolute;
  top: -2px;
  z-index: -1;
  display: block;
}

.clue-avatar__border {
  border-radius: 50%;
  height: 67px;
  width: 67px;
  animation: breathe 1s linear infinite;
  background-image: url(@/assets/images/avatar-border.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.clue-avatar__img {
  border-radius: 50%;
  height: 67px;
  width: 67px;
}

.clue-avatar__img img {
  animation: breathe-img 1s linear infinite;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.clue-avatar__text {
  border-radius: 8px;
  background: linear-gradient(
    -60.12deg,
    rgb(182, 119, 255) 7.762%,
    rgb(25, 85, 247) 98.992%
  );
  box-shadow: 0 30px 50px 0 rgba(76, 89, 141, 0.06);
  color: #fff;
  font-size: 13px;
  height: 26px;
  line-height: 26px;
  margin-top: -12px;
  position: relative;
  text-align: center;
  width: 68px;
}

.buttonBox {
  width: 70px;
  height: 212px;
  border-radius: 8px;
  background: linear-gradient(
    -44.1deg,
    rgb(182, 119, 255) 3.112%,
    rgb(25, 85, 247) 100%
  );
  box-shadow: 0 14px 30px hsla(0, 34%, 55%, 0.15);
  outline: none;
  overflow: hidden;
  position: relative;
  transition: height 0.5s;
}

.buttonBox::before {
  --size: 20px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0) 100%
  );
  content: '';
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  transition:
    all 0.3s ease,
    left 0s,
    top 0s;
  height: var(--size);
  left: var(--x);
  top: var(--y);
  width: var(--size);
}

.buttonBox:hover:before {
  --size: 100px;
  opacity: 1;
}

.aside-item {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 70px;
  justify-content: center;
  position: relative;
  transition: all 0.4s;
  width: 70px;
  box-sizing: border-box;
}

.aside-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.phone-dialog {
  position: absolute;
  width: 240px;
  height: 70px;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  top: 95px;
  right: 6px;
  opacity: 0;
  transition: all 0.4s;
  z-index: -1;
}

.phone-dialog.active {
  opacity: 1;
  z-index: 1010;
}
.ic-phone-dialog {
  /* 异色渐变 */
  background: linear-gradient(
    90deg,
    rgb(182, 119, 255) 3.704%,
    rgb(25, 85, 247) 100%
  );
  border-radius: 100%;
}
.fontGradient {
  background: linear-gradient(90deg, rgb(182, 119, 255), rgb(25, 85, 247));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-align: left;
  line-height: 125%;
  letter-spacing: 0.4px;
}
.wecaht-dialog {
  position: absolute;
  width: 210px;
  height: 220px;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  top: 67px;
  right: 6px;
  z-index: -1;
  transition: all 0.4s;
  opacity: 0;
}

.wecaht-dialog.active {
  opacity: 1;
  z-index: 1010;
}

.call-dialog {
  position: absolute;
  width: 260px;
  min-height: 283px;
  border-radius: 10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  top: 23px;
  right: 6px;
  z-index: -1;
  transition: all 0.4s;
  opacity: 0;
}

.call-dialog.active {
  opacity: 1;
  z-index: 1010;
}
.hide-dialog {
  opacity: 1;
  z-index: 1010;
  position: absolute;
  width: 260px;
  min-height: 450px;
  top: 0;
  right: 6px;
  bottom: 0;
  z-index: -1;
  transition: all 0.4s;
  opacity: 0;
}
.hide-dialog.active {
  z-index: 1010;
}

.input-field {
  width: calc(100% - 30px);
  margin-left: 15px;
  padding: 12px 10px;
  margin-top: 16px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  background: rgb(255, 255, 255);
}

.input-field:focus {
  border-color: rgb(25, 85, 247);
}

.input-textarea {
  width: calc(100% - 30px);
  margin-left: 15px;
  padding: 12px 10px;
  max-height: 200px;
  margin-top: 16px;
  min-height: 70px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  height: 70px;
  background: rgb(255, 255, 255);
}
.input-textarea:focus {
  border-color: rgb(25, 85, 247);
}

.bookBtn {
  border-radius: 4px;

  /* 异色渐变 */
  background: linear-gradient(
    90deg,
    rgb(182, 119, 255) 3.704%,
    rgb(25, 85, 247) 100%
  );
  width: 230px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-family: PingFang SC;
  font-size: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 15px;
  font-weight: 400;
  letter-spacing: 0.4px;
}
.bookBtn:not(:disabled):active {
  opacity: 0.7;
}

.bookBtnFull {
  border-radius: 4px;

  /* 异色渐变 */
  background: linear-gradient(
    90deg,
    rgb(182, 119, 255) 3.704%,
    rgb(25, 85, 247) 100%
  );
  width: 230px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  font-family: PingFang SC;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 16px;
  margin-left: 15px;
  font-weight: 400;
  letter-spacing: 0.4px;
}
.input-field:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

.input-textarea:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}
.bookBtn:disabled {
  background: #666666;
  cursor: not-allowed;
}
</style>
